import Module from "./components/Module";
import icon1 from "./assets/4287.svg";
import icon2 from "./assets/4289.svg";

export default defineComponent({
	name: "EmployeeStatus",
	setup() {
		return () => (
			<Module title={"员工情况"}>
				<div class={"w-full h-full flex flex-col"}>
					<div class={"flex flex-row justify-around items-center"}>
						<div class={"w-fit"}>
							<div class={"text-[13px] mb-2"}>研发</div>
							<div class={"flex flex-row justify-center items-end"}>
								<div class={"text-[#FFCC62] text-[22px]"}>1365</div>
								<div class={"text-[13px]"}>人</div>
							</div>
						</div>
						<div class={"h-[35px] w-[1px] bg-gray-400"}></div>
						<div class={"w-fit"}>
							<div class={"text-[13px] mb-2"}>研发</div>
							<div class={"flex flex-row justify-center items-end"}>
								<div class={"text-[#FFCC62] text-[22px]"}>1365</div>
								<div class={"text-[13px]"}>人</div>
							</div>
						</div>
						<div class={"h-[35px] w-[1px] bg-gray-400"}></div>
						<div class={"w-fit"}>
							<div class={"text-[13px] mb-2"}>研发</div>
							<div class={"flex flex-row justify-center items-end"}>
								<div class={"text-[#FFCC62] text-[22px]"}>1365</div>
								<div class={"text-[13px]"}>人</div>
							</div>
						</div>
					</div>
					<div class={"w-full h-full  flex flex-row justify-around"}>
						<div class={"w-1/4 h-full flex flex-col justify-around items-center"}>
							<div class={"text-[13px]"}>研发人员占比</div>
							<div class={"relative w-[80px] h-[80px]"}>
								<div class={"flex flex-row absolute top-0 right-0 left-0 bottom-0 w-fit h-fit m-auto items-end"}>
									<div class={"text-[26px]"}>25.3</div>
									<div class={"text-[14px]"}>%</div>
								</div>
								<img src={icon1} alt="" />
							</div>
						</div>
						<div class={"w-3/5 h-full flex flex-col justify-center items-start"}>
							<div class={"text-[13px] ml-1"}>销售团队分布</div>
							<div class={" h-full w-full relative"}>
								<img class={"absolute top-0 bottom-0 left-0 m-auto h-[100%]"} src={icon2} alt="" />
								<div class={"h-full w-full flex flex-col justify-around items-end"}>
									<div class={"flex flex-row w-full justify-end items-center"}>
										<div class={"h-[0px] w-[70px] border-dashed border-gray-400 border-0 border-b "}></div>
										<div class={"text-[13px] mx-2"}>南区销售</div>
										<div class={"text-[18px] "}>40%</div>
									</div>
									<div class={"flex flex-row w-full justify-end items-center"}>
										<div class={"h-[0px] w-[70px] border-dashed border-gray-400 border-0 border-b "}></div>
										<div class={"text-[13px] mx-2"}>东区销售</div>
										<div class={"text-[18px] "}>35%</div>
									</div>

									<div class={"flex flex-row w-full justify-end items-center"}>
										<div class={"h-[0px] w-[70px] border-dashed border-gray-400 border-0 border-b "}></div>
										<div class={"text-[13px] mx-2"}>北区销售</div>
										<div class={"text-[18px] "}>25%</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</Module>
		);
	}
});
